<script setup>
import bottom from "../../components/bottom.vue"
import scrollToAnchor from "../../assets/scrollToAnchor.js";
import {Coin, Goods, MessageBox, School} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import request5151 from "../../utils/request5151.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
// 路由
const router = useRouter()
const manage= ref(false)
if(sessionStorage.getItem('type')==='3'){
  manage.value=true
}
// 录取信息弹窗
const admissionInfoVisible = ref(false)
// 我的录取信息
const myAdmissionInfoData = ref({})
const openAdmissionInfo = () => {
  admissionInfoVisible.value = true
  request5151({
    url: '/admissioninfo/getAdmissionInfoBySNumber',
    method: 'get',
    params: {sNumber: sessionStorage.getItem('snumber')}
  }).then((res) => {
    myAdmissionInfoData.value = res.data.data
  })
}
//通知公告
const announcement = ref({
  title: '我是标题',
  content: '我是内容',
  publishTime: '2024年7月10日-2024年7月15日'
})
//获取通知公告
const getAnnouncement = () => {
  request5151({
    url: '/welcomeAnnouncement/getAnnounceOnStart',
    method: 'get',
  }).then((res) => {
    announcement.value = res.data.data
  })
}
getAnnouncement()
</script>

<template>
  <div class="welcomeAll">
    <div class="top">
      <div class="top-left">
        <img src="../../assets/welcome/logo.png" alt="?" style="height: 80px;
margin-right: 160px;">
      </div>
      <div class="top-right">
        <ul style="display: flex">
          <li @click="router.push('/')">首页</li>
          <li><a href="#needKnow" @click="scrollToAnchor">报到须知</a></li>
          <li @click="openAdmissionInfo">我的录取信息</li>
          <li @click="router.push('/myProgress')">我的进度</li>
          <li @click="router.push('/manageWelcomeInfo')" v-if="manage">管理迎新信息</li>
        </ul>
      </div>
    </div>
    <div class="carousel" style="display: flex;justify-content: space-between;width: 90%;margin: 0 auto;">
      <el-card class="mycard1">
        <img src="../../assets/welcome/2.jpg" height="400" width="600"/>
      </el-card>
      <el-card class="mycard2">
        <div class="mycard2_title"><h3>通知公告</h3>
          <img src="../../assets/welcome/R-C.gif" height="68" width="68"/></div>
        <hr>
        <div class="announcement">
          <span style="font-size: larger">{{ announcement.title }}</span>
          <p style="font-size: small">{{ announcement.publishTime }}</p>
          <p style="font-size: 15px;text-indent: 2em;line-height: 30px;">{{ announcement.content }}</p>
        </div>
      </el-card>
    </div>
    <hr>
    <h2 class="myH2">REPORTING PROCESS</h2>
    <h1 style="text-align: center">报到流程</h1>
    <el-button @click="router.push('/reportAll')" style="margin-left: 710px;" type="success">我要报到</el-button><br>
    <img src="../../assets/welcome/img_1.png" height="180" width="1300"
    style="margin-left: 100px;"/>
    <hr>
    <h2 class="myH2" id="needKnow">REPORT NOTICE</h2>
    <h1 style="text-align: center">报到须知</h1>
    <div class="registration-notice">
      <h2>报到须知</h2>
      <ul>
        <li>请携带本人身份证及录取通知书原件。</li>
        <li>报到时间为: 2024年7月10日-2024年7月15日。</li>
        <li>需准备一寸免冠照片若干张。</li>
        <li>如有特殊情况不能按时报到，请提前联系学校。</li>
      </ul>
    </div>
    <bottom/>
  </div>
  <!--录取信息弹窗-->
  <el-dialog v-model="admissionInfoVisible" title="我的录取信息" width="50%">
    <el-card>
      <h3 class="myh3">学号:</h3><span>{{ myAdmissionInfoData.snumber }}</span><br>
      <h3 class="myh3">录取专业:</h3><span>{{ myAdmissionInfoData.profession }}</span><br>
      <h3 class="myh3">录取班级:</h3><span>{{ myAdmissionInfoData.classes }}</span><br>
      <h3 class="myh3">录取时间:</h3><span>{{ myAdmissionInfoData.admissionDate }}</span><br>
      <h3 class="myh3">录取结果:</h3><span style="color: green">{{ myAdmissionInfoData.admissionStatus }}</span><br>
    </el-card>
  </el-dialog>
</template>

<style scoped>
a {
  text-decoration: none;
  color: black;
}

.top {
  display: flex;
  align-items: center;
}

.top-right {
  margin-top: 5px;
  margin-left: 380px;
}

.top-right li {
  line-height: 35px;
  list-style: none;
  margin-right: 20px;
  cursor: pointer;
}

.welcomeAll {
  width: 100%;
}

.myH2 {
  text-align: center;
  font-weight: normal;
  font-size: 40px;
  color: darkgray;
}
.registration-notice {
  padding: 20px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  margin-bottom: 20px;
}

.registration-notice h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.registration-notice ul {
  list-style-type: disc;
  margin-left: 20px;
}

.registration-notice ul li {
  margin-bottom: 10px;
  font-size: 16px;
  list-style: circle;
}

.mycard1 {
  width: 650px;
}

.mycard2 {
  width: 650px;
}

.myh3 {
  display: inline;
}

.mycard2_title {
  display: flex;
  align-items: center;
}
</style>
